import React from "react";
import { Form, Input, Button, Checkbox, Card, message } from 'antd'
const FormItem = Form.Item

export default class FormLogin extends React.Component {

  handleSubmit = () => {
    let userInfo = this.props.form;
    this.props.form((err, values) => {
      if (!err) {
        message.success(`${userInfo.userName} 恭喜你，您通过本次表单组件学习，当前密码为：${userInfo.userPwd}`)
      }
    })
  }

  render() {
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };

    return (
      <div style={{ width: '100%' }}>
        <Card>
          <Form
            {...layout}
            name="basic"
            style={{ width: '300px' }}
            initialValues={{ remember: true }}
          >
            <Form.Item
              label="用户名"
              name="用户名"
              rules={[{ required: true, message: '请检查你的用户名!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="密码"
              rules={[{ required: true, message: '请检查你的密码!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item {...tailLayout} name="remember" valuePropName="checked">
              <Checkbox>记住密码</Checkbox>
            </Form.Item>

            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>
                登录
            </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}